﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="/Content/css/tuanchuang.css" />
    <script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.form.js"></script>
</head>
<body>
    <div class="chatutanchuang">
        <div class="chatutanchuang-br">
            <div class="tjtply">
                选择您要添加图片的来源</div>
            <div class="tptu">
                <ul>
                    <li class="on1" id="liPhotoList"><a href="#" onclick="ShowCard('list');return false;">
                        图片管家</a></li>
                    <li class="off1" id="liNewPhoto"><a href="#" onclick="ShowCard('new');return false;">
                        我的电脑</a></li>
                </ul>
            </div>
        </div>
        <div class="chatutanchuang-nr" id="DivPhotoList">
            <div class="chatutanchuang-wdxc">
                <table>
                    <tr>
                        <td width="118" id="red_nickname">
                            <span style="vertical-align: top; padding-left: 17px;">
                                <select name="select" class="wodexiangce" id="SelectCategory" onchange="ShowPhoto(this.value, 1);">
                                </select>
                            </span>
                        </td>
                        <td width="350" id="red_nickname">
                            请从您的图片管家中点击选择图片
                        </td>
                    </tr>
                </table>
            </div>
            <div class="chatutanchuang-zhaopian" id="DivPhoto">
            </div>
            <div id="pageNext" style="padding-right: 16px;">
                <table align="right">
                    <tr>
                        <td id="TdPage">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="chatutanchuang-nr" id="DivNewPhoto" style="display: none">
            <div class="chatutanchuang-wdxc" style="padding-left: 31px;">
                如果您不希望上传的图片在相册中公开展示，建议将图片上传到不公开相册中
            </div>
            <div class="chatutanchuang-wddn">
                <% using (Html.BeginForm("SavePhotoSimple", "Album", FormMethod.Post, new { id = "filePost", enctype = "multipart/form-data" }))
                   { %>
                <table width="90%" cellspacing="0" cellpadding="0">
                    <tr height="35">
                        <td width="70%" style="padding-left: 10px; line-height: 45px;">
                            选择相册： <span style="vertical-align: top;">
                                <select name="albumId" id="albumId" class="xiangcebox">
                                </select>
                            </span><span class="cored2"><a href="#" target="_blank" style="color: #1175CA;">创建新相册</a></span>
                        </td>
                    </tr>
                    <tr height="45">
                        <td width="70%" style="padding-left: 10px; line-height: 45px;">
                            <div>
                                <span>选择相册：</span>
                                <input type="file" name="FilePhoto" /><input type="submit" name="BtnSave" value="保存" /></div>
                        </td>
                    </tr>
                    <tr>
                        <td height="80">
                            <font color="#717171">提示：选择的图片大小不超过1MB，支持jpg,png,gif</font>
                        </td>
                    </tr>
                </table>
                <% } %>
            </div>
        </div>
        <% var photoCount = 1; %>
        <div class="chatutanchuang-ycrdtp">
            <div class="chatutanchuang-ycrdtp-tu">
                <div>
                    要插入的图片(<label id="labelCount">1</label>/<%= photoCount %>)[点击选中的图片可删除重选]</div>
            </div>
            <div class="chatutanchuang-ycrdtp-br">
                <% for (var i = 0; i < photoCount; i++)
                   { %>
                <div>
                    <a href="#">
                        <img id="ImgSelect<%= i %>" src="<%=Common.ImageLoadHelper.GetNarrowImageUrl(0)%>" /></a></div>
                <% } %>
            </div>
        </div>
    </div>
    <input type="hidden" value="<%= ViewData["ImageBasePath"] %>" name="HidImageBasePath"
        id="HidImageBasePath" />
    <input type="hidden" value="" name="SelectAlbumIDs" id="SelectAlbumIDs" />
    <input type="hidden" value="0" id="CurrentPhotoCount" />
    <input type="hidden" value="," name="SelectPhotoIDs" id="SelectPhotoIDs" />
    <input type="hidden" value="," id="IdlePhotoID" />
    <script type="text/javascript">
        var json = eval("[" + '<%= ViewData["JSON"] %>' + "]");
        var photoTotal = 1;
        function ShowPhoto(id, pageNo) {
            var pageShowCount = 12;
            $("#DivPhoto").empty();
            $("#TdPage").empty();
            id = id == 0 ? $("#SelectCategory").val() : id;
            for (var i = 0; i < json.length; i++) {
                if (json[i].AlbumId == id) {
                    var totalCount = json[i].PhotoList.length;
                    var showCount = totalCount < pageNo * pageShowCount ? json[i].PhotoList.length : pageShowCount;
                    var pageTotal = parseInt(totalCount / pageShowCount) == totalCount / pageShowCount ? totalCount / pageShowCount : parseInt(totalCount / pageShowCount) + 1;

                    if (pageNo - 1 == 0) {
                        $("#TdPage").append("<a class=\"next\" href=\"javascript:void(0);\">上一页</a>");
                    }
                    else {
                        $("#TdPage").append("<a class=\"next\" href=\"javascript:ShowPhoto(" + id + ", " + (pageNo - 1) + ");\">上一页</a>");
                    }
                    for (var z = 1; z <= pageTotal; z++) {
                        if (z == pageNo) {
                            $("#TdPage").append("<a class=\"curr\" href=\"javascript:ShowPhoto(" + id + ", " + z + ");\"><span style=\"color: red\">" + z + "</span></a>");
                        }
                        else {
                            $("#TdPage").append("<a class=\"num\" href=\"javascript:ShowPhoto(" + id + ", " + z + ");\">" + z + "</a>");
                        }
                    }
                    if (pageNo == pageTotal) {
                        $("#TdPage").append("<a class=\"next\" href=\"javascript:void(0);\">下一页</a>");
                    }
                    else {
                        $("#TdPage").append("<a class=\"next\" href=\"javascript:ShowPhoto(" + id + ", " + (pageNo + 1) + ");\">下一页</a>");
                    }

                    for (var j = (pageNo - 1) * pageShowCount; j < (pageNo - 1) * pageShowCount + showCount; j++) {
                        $("#DivPhoto").append("<div><a href=\"javascript:SelectPhoto(" + json[i].PhotoList[j].AnnexID + ");\"><img src=\"" + $("#HidImageBasePath").val() + "Narrow/" + json[i].PhotoList[j].AnnexID + "\" /></a></div>");
                    }
                }
            }
        }

        function SelectPhoto(id) {
            var currentPhotoCount = parseInt($("#CurrentPhotoCount").val()); //当前选中的图片数
            var v = $("#SelectPhotoIDs").val();
            var size = $("#SelectPhotoSizes").val();
            if (v.indexOf("," + id + ",") == -1) {
                var insertId = "";
                if ($("#IdlePhotoID").val() == ",") {
                    if (currentPhotoCount < photoTotal) {
                        insertId = "ImgSelect" + currentPhotoCount;
                    }
                } else {
                    insertId = $("#IdlePhotoID").val().split(",")[1];
                    $("#IdlePhotoID").val($("#IdlePhotoID").val().replace("," + insertId + ",", ","));
                }
                if (insertId != "") {
                    window.parent.document.getElementById("HidSelectImgID").value = id;
                    $("#" + insertId).attr("src", $("#HidImageBasePath").val() + "Narrow/" + id);
                    $("#" + insertId).bind("click", function () { DeletePhoto(id, this); return false; });
                    $("#SelectPhotoIDs").val(v + id + ",");
                    currentPhotoCount = currentPhotoCount + 1;
                    $("#CurrentPhotoCount").val(currentPhotoCount);
                    $("#labelCount").text(currentPhotoCount);
                }
            }
        }

        function AlbumCategory() {
            for (var i = 0; i < json.length; i++) {
                $("#SelectCategory").append("<option value=\"" + json[i].AlbumId + "\">" + json[i].AlbumName + "</option>");
                $(".xiangcebox").append("<option value=\"" + json[i].AlbumId + "\">" + json[i].AlbumName + "</option>");
            }
        }

        function DeletePhoto(id, obj) {
            var v = $("#SelectPhotoIDs").val();
            $("#SelectPhotoIDs").val(v.replace("," + id + ",", ","));
            $("#IdlePhotoID").val($("#IdlePhotoID").val() + obj.id + ",");
            obj.src = "http://localhost:8001/Narrow";
            var currentPhotoCount = parseInt($("#CurrentPhotoCount").val()) - 1;
            $("#CurrentPhotoCount").val(currentPhotoCount);
            $("#labelCount").text(currentPhotoCount);
            $("#" + obj.id).unbind("click");
        }

        function ShowCard(type) {
            if (type == "list") {
                $("#DivNewPhoto").css("display", "none");
                $("#DivPhotoList").css("display", "");
                $("#liPhotoList").attr("class", "on1");
                $("#liNewPhoto").attr("class", "off1");
            } else if (type == "new") {
                $("#DivNewPhoto").css("display", "");
                $("#DivPhotoList").css("display", "none");
                $("#liPhotoList").attr("class", "off1");
                $("#liNewPhoto").attr("class", "on1");
            }
        }

        $('#filePost').submit(function () {
            var currentPhotoCount = parseInt($("#CurrentPhotoCount").val());
            if (currentPhotoCount < photoTotal) {
                var result = $(this).ajaxSubmit(function (data) {
                    for (var i = 0; i < json.length; i++) {
                        if (json[i].CategoryID == $("#AddCategory").val()) {
                            var result = data.split(",");
                            json[i].PhotoList.push({ "AlbumName": result[0], "AnnexID": result[1] });
                            SelectPhoto(result[1]);
                        }
                    }
                });
            }
            return false;
        });

        $(document).ready(function () {
            AlbumCategory();
            ShowPhoto(0, 1);
        });
    </script>
</body>
</html>
